<template>
  <div id="app">
    <div class="list-group">
      <router-link class="list-group-item" active-class="active" to="/home">主页</router-link>
      <router-link class="list-group-item" active-class="active" to="/other">其他</router-link>
    </div>
    <div class="panel">
      <div class="panel-body">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {}
}
</script>

<style>
.list-group {
  float: left;
}

.panel-body {
  width: 300px;
  height: 200px;
  margin-left: 100px;
  border: 1px solid blue;
  border-radius: 6px;
}

.list-group-item {
  width: 80px;
  height: 40px;
  border: 1px solid orange;
  border-radius: 6px;
  margin-bottom: 10px;
  text-decoration: none;
}

.list-group-item, .panel-body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.active {
  border-color: blue;
  background-color: rgb(61, 61, 248);
  color: white;
}

li {
  list-style: none;
}

ul {
  padding-left: 0
}
</style>
